<template>
	<view style="box-sizing: border-box; padding: 10px;">
		<view style="box-sizing: border-box; padding: 10px; border-radius: 8px; background: #fff; margin-bottom: 10px;"
		@click="jump('./xuyuanDetail', i)"
		v-for="i in list" :key="i.id">
			<view>
				<image style="width: 100%;" mode="widthFix" 
				:src="i.images[0]"></image>
			</view>
			<view style="font-weight: bold; font-size: 18px; line-height: 36px;">
				{{i.name}}
			</view>
			<view style="line-height: 22px; font-size: 14px;">
				{{i.describe}}
			</view>
			<view style="color: #FA9700; line-height: 36px;">
				已有{{i.buy_num}}人为他许愿
			</view>
			<view>
				<u-button @click.stop="show=true, shopInfo = i, allPrice = i.price, selectServer =-1, servicePrice = '', spe = shopInfo.spe" 
				shape="circle" type="warning">￥{{i.price}}为他许愿</u-button>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom">
				<view style="box-sizing: border-box; padding: 10px 10px 0 10px; ">
					<!-- <view>
						<view style="line-height: 46px; font-weight: bold;">
							选择服务
						</view>
						<view style="width: 100%;min-height: 50rpx;">
							<view class="xuyuanlist"
							v-for="(i, index) in serverList" :key="i.id"
							@tap="selectServer = i.id, serverIndex = index, 
							spe = serverList[serverIndex].spe, 
							selectSpe = '',
							allPrice = parseFloat(i.price) + parseFloat(shopInfo.price)"
							 :style="selectServer == i.id ? 'color: #fff; background-color: #FA9700' : ''"
							 style="" >
								{{i.name}}
							</view>
						</view>
					</view>	 -->
					
					<!-- {{JSON.stringify(spe)}} -->
					<view style="width: 100%;display: flex;flex-direction: column;">
						<view style="line-height: 46px; font-weight: bold;text-align: left;">
							选择规格 
						</view>
						<view style="width: 100%;min-height: 50rpx;">
							 <!-- allPrice = parseFloat(servicePrice) + parseFloat(shopInfo.price) -->
							<view class="xuyuanlist"
							 @tap="servicePrice = j.price, selectSpe = j.name, 
							 allPrice = parseFloat(j.price)"
							 :style="selectSpe == j.name ? 'color: #fff; background-color: #FA9700' : ''"
							 style="" v-for="(j, index1) in shopInfo.spe" :key="index1">
								{{j.name}}
							</view>
						</view>
					</view>
					
					
					
					<view style="width: 100%; overflow: hidden;">
						<view style="display: flex; line-height: 46px;">
							<view>
								收货地址
							</view>
							<view 
							@tap="tipPage('/pages/address/address')"
							style="font-size: 14px; color: #999; margin-left: auto;
							text-align: right;
							width: 60%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							">
							<template v-if="address === ''">
								请选择
								<u-icon name="arrow-right"></u-icon>
							</template>
								<template v-else>
									{{address}}
									</template>
							</view>
						</view>
					</view>
					
					<view>
						<view style="line-height: 46px; font-weight: bold;">
							备注
						</view>
						<view>
							<u-input v-model="remark" :type="type" :border="border" />
						</view>
					</view>
					
					<view style="border-top: #ccc solid 1px; height: 50px; margin-top: 10px; display: flex; line-height: 50px;">
						<view style="width: 50%; line-height: 46px;">
							共计：<text style="color:#FA9700; ;">￥{{parseFloat(allPrice).toFixed(2)}}</text> 
						</view>
						<view style="width: 50%; text-align: right; margin: auto;">
							<u-button  shape="circle" size="medium" type="warning"
							@tap="createSubmit()"
							>立即购买</u-button>
						</view>
					</view>
					
				</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	import {shopList, serverList, createOrder} from './request.js'
	export default {
		data() {
			return {
				show:false,
				value: '',
				type: 'textarea',
				border: true,
				mountains_id: '',
				list: [],
				serverList: [],
				selectServer: -1,
				shopInfo: {},
				address: '',
				address_id: '', 
				goods_id: '',
				width: '',
				height: '',
				remark: '',
				servicePrice: '',
				allPrice: '',
				serverIndex: 0,
				spe: [],
				selectSpe: ''
			}
		},
		onLoad(option) {
			this.mountains_id = option.id
			this.x = option.x
			this.y = option.y
			this.width = uni.getSystemInfoSync().screenWidth
			this.height = uni.getSystemInfoSync().screenHeight
			this.getList()
		},
		onShow() {
			
			console.log(this.address)
			console.log(this.address_id)
		},
		methods: {
			// 获取商品列表
			getList () {
				let params = {
					mountains_id: this.mountains_id
				}
				shopList(this.mountains_id).then((res) => {
					console.log(res, '商品')
					if (res.data.code === 1) {
						this.list = res.data.data
						// this.spe = res.data.data.spe
						// this.getServerList()
					}
				})
			},
			// 获取服务列表
			getServerList () {
				// var data={
				// 	id:this.mountains_id
				// }
				// console.log('3333333',data)
				
				serverList(this.mountains_id).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.serverList = res.data.data
						this.spe = this.serverList[this.serverIndex].spe
						console.log(this.spe, '，，，，，，，，，，，，')
					}
				})
			},
			// 跳转页面
			tipPage (path) {
				uni.navigateTo({
					url: `${path}?type=xuyuan`
				})
			},
			// 创建订单
			createSubmit () {
				// if (this.selectServer === -1) {
				// 	uni.showToast({
				// 		title: '请挑选服务！',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	return
				// }
				let params = {
					goods_id: this.shopInfo.id,
					serve_id: this.selectServer,
					x: this.x,
					y: this.y,
					screen_size: this.width + ',' + this.height,
					address_id: this.address_id,
					spu_name: ''
				}
				if (this.selectSpe != '') {
					params.spu_name = this.selectSpe
				}
				
				if (this.remark !== '') {
					params.remark = this.remark
				}
				createOrder(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						console.log('进入支付页面')
						this.show = false
						let parices = parseFloat(this.allPrice).toFixed(2)
						uni.navigateTo({
							url: '../pay/pay?orderId=' + res.data.data.order_no + '&price=' + parices+'&type=xuyuan'
						})
					}
				})
			},
			jump (path, info) {
				console.log('跳转')
				uni.navigateTo({
					url: `./xunyuanDetail?info=${encodeURIComponent(JSON.stringify(info))}&x=${this.x}&y=${this.y}`
				})
			}
		}
	}
</script>

<style>
page{background: #f0f0f0;}
.xuyuanlist{
	font-size: 14px; color: #666;border: #ccc solid 1px; padding: 10px 20px; border-radius: 8px; float: left; margin-bottom: 10px;
	margin-right: 20rpx;
}
</style>
